<template>
    <div id="components-layout-demo-basic">
        <a-layout>
            <a-layout-header>
                <Header_leafer @onChange="btn_onChange" @onSelect="onSelect">
                    <template #more>
                        <a-button @click="saveData">保存</a-button>
                    </template>
                </Header_leafer>
            </a-layout-header>
            <a-layout>
                <a-layout-sider v-model="collapsed" :trigger="null" collapsible collapsedWidth="30" width="280">
                    <a-button shape="circle" class="fixd_btn" @click="closeColl"
                        :class="collapsed ? 'fixd_btn_after' : 'fixd_btn'">
                        <a-icon type="right" v-if="collapsed" />
                        <a-icon type="left" v-else />
                    </a-button>
                    <Fsilde @change="onChange" v-if="!collapsed" @result="(e) => render.result = e" />
                </a-layout-sider>
                <a-layout-content>
                    <a-dropdown :trigger="['contextmenu']" v-model="visibleMenu">
                        <div ref="leaferCanvas" id="leaferCanvas" @dragover.prevent @drop="onDrop"
                            :style="{ background: (render && render.background) ? render.background : '' }"></div>
                        <a-menu slot="overlay">
                            <template v-for="(item, index) in menuList">
                                <!-- 特殊处理 '合并' 菜单项 -->
                                <a-menu-item :key="index" @click="menuChange(item)"
                                    v-if="item.type === 'group' && menuSelectList.length > 1">
                                    <a-icon :type="item.icon"></a-icon> {{ item.name }}
                                </a-menu-item>
                                <!-- 其他菜单项保持不变 -->
                                <a-menu-item :key="index" @click="menuChange(item)" v-else-if="item.type !== 'group'">
                                    <a-icon :type="item.icon"></a-icon> {{ item.name }}
                                </a-menu-item>
                            </template>
                        </a-menu>
                    </a-dropdown>
                </a-layout-content>
                <a-layout-sider v-model="collapsed_right" :trigger="null" collapsible collapsedWidth="30" width="280">
                    <a-button shape="circle" class="fixd_btn_right" @click="closeColl_right"
                        :class="collapsed_right ? 'fixd_btn_left_after' : 'fixd_btn_right'">
                        <a-icon type="left" v-if="collapsed_right" />
                        <a-icon type="right" v-else />
                    </a-button>
                    <ProtoType v-if="!collapsed_right" :render="render" />
                </a-layout-sider>
            </a-layout>
        </a-layout>
    </div>
</template>

<script>
import Render from './index'
import Header_leafer from '@/components/leafer/header.vue'
import Fsilde from '@/components/leafer/silde.vue';
import ProtoType from '@/components/leafer/prototype.vue';
import { events } from '@/views/LeaferJS/utils/emit'
import minx from './../../components/leafer/mixin'
export default {
    mixins: [minx],
    components: {
        Fsilde, Header_leafer, ProtoType
    },
    data() {
        return {
            render: null,
            visible: true,
            models: null,
            collapsed: false,
            collapsed_right: false,
            PropertyVisible: false,
            visibleMenu: false,
            menuList: [
                {
                    name: '复制',
                    icon: 'copy',
                    type: 'copy'
                },
                {
                    name: '删除',
                    icon: 'delete',
                    type: 'delete'
                },
                {
                    name: '合并',
                    icon: 'usergroup-add',
                    type: 'group'
                },
                {
                    name: '取消合并',
                    icon: 'usergroup-delete',
                    type: 'delete-group'
                },
                {
                    name: '置顶',
                    icon: 'vertical-align-top',
                    type: 'up'
                },
                {
                    name: '置底',
                    icon: 'vertical-align-bottom',
                    type: 'down'
                },
                {
                    name: '导出',
                    icon: 'export',
                    type: 'export'
                },
                {
                    name: '绑定属性',
                    icon: 'edit',
                    type: 'edit'
                },
            ],
            menuModels: null,
            selectList: null,
            menuSelectList: [],
            node: null,
            renderData: null
        }
    },
    mounted() {
        this.initLeafer()
        events.on('menu_event', e => {
            if (e) {
                this.menuModels = e
            } else {
                this.visibleMenu = false
            }
        })
        events.on('event', e => {
            if (!e) {
                this.visibleMenu = false
            }
        })
        events.on('select', e => {
            if (e) {
                this.selectList = e
                this.menuSelectList = e
            }
        })
        document.addEventListener('keydown', (e) => {
            if (e.key === 'Delete') {
                this.menuChange(this.menuList[1])
            }
        });
    },
    methods: {
        closeColl() {
            this.collapsed = !this.collapsed
            this.render.render()
        },
        closeColl_right() {
            this.collapsed_right = !this.collapsed_right
            this.render.render()
        },
        initLeafer() {
            this.render = new Render(this.$refs.leaferCanvas, {
                ruler: true,
                snap: true,
                matrix: true,
            })
        },
        onClose() {
            this.visible = false
        },
        onChange(val) {
            this.models = val
        },
        btn_onChange(val) {
            this.render.create = true
            this.render.createModel(val)
        },
        onDrop(e) {
            e.preventDefault();
            this.render.eventUp = true
            if (this.models) {
                this.render.models = this.models
            } else {
                alert('请选择模型')
            }
        },
        exportData() {
            if (this.selectList.length && this.selectList.length > 0) {
                this.$message.warning('暂时无法导出全部')
            } else {
                this.selectList.export('test.png')
            }
        },
        async saveData() {
            let data = {
                background: this.render.background,
                orgId: this.node.id,
                name: this.node.name,
                pageData: JSON.stringify(this.render.app.tree.toJSON())
            }
            localStorage.setItem('leafer', JSON.stringify(this.render.app.tree.toJSON()))
            await this.addDraw(data).then(res => {
                if (res.code === 200) {
                    this.$message.success('保存成功')
                }
            }).catch(err => {
                this.$message.error('操作失败')
            })
        },
        menuChange(item) {
            if (item.type === 'copy') {
                this.render.models = this.selectList
                this.render.clone = true
            } else if (item.type === 'delete') {
                if (this.selectList && this.selectList.length && this.selectList.length > 0) {
                    this.selectList.forEach(item => item.destroy())
                } else if (this.selectList) {
                    this.selectList.destroy()
                }
            } else if (item.type === 'up') {
                this.menuModels.zIndex = 1
            } else if (item.type === 'down') {
                this.menuModels.zIndex = 0
            } else if (item.type === 'group') {
                this.render.addGroup(this.selectList)
            } else if (item.type === 'export') {
                this.exportData()
            } else if (item.type === 'edit') {
                this.$emit('edit', this.menuModels)
            }
            this.visibleMenu = false
        },
        onSelect(val) {
            this.node = val.node
            this.renderData = val.data
            if (this.renderData) {
                this.render.app.tree.clear()
                this.render.background = this.renderData.background
                this.render.app.tree.set(JSON.parse(this.renderData.pageData))
            }
        }

    }
}
</script>

<style lang="less" scoped>
#leaferCanvas {
    display: block;
    width: 100%;
    height: calc(100vh - 100px);
}

#components-layout-demo-basic {
    text-align: center;
    background: #F3F4FA;
    height: 100vh;
}

#components-layout-demo-basic .ant-layout-header {
    background: #fff;
}


#components-layout-demo-basic .ant-layout-sider {
    background: #ffffff;
    height: calc(100vh - 100px);
    border-radius: 10px;
    margin: 10px;

    .fixd_btn {
        position: relative;
        left: 138px;
        top: 40%;
        transition: 0.2s;
        border: none;
        z-index: 10;
    }

    .fixd_btn_after {
        left: 0px;
        transition: 0.2s;
    }

    .fixd_btn_right {
        position: relative;
        right: 138px;
        top: 40%;
        transition: 0.2s;
        z-index: 10;
        border: none;
    }

    .fixd_btn_left_after {
        right: 0px;
        transition: 0.2s;
    }

}

#components-layout-demo-basic .ant-layout-content {
    // margin: 2px;
    padding-top: 5px;
}

#components-layout-demo-basic>.ant-layout {
    margin-bottom: 48px;
}

#components-layout-demo-basic>.ant-layout:last-child {
    margin: 0;
}
</style>